Installing solana wallet adapter and candy machine in JS project

install Solana CLI

sh -c "$(curl -sSfL https://release.solana.com/stable/install)"

Setup a DevNet wallet:

solana-keygen new --outfile ./wallet.json

then yhis command will asociate it with your Solana and Sugar CLI's:

solana config set --keypair ./wallet.json

and make sure you are in Devnet

solana config set --url https://api.devnet.solana.com

Check Your Solana Wallet Address: If you already have a wallet set up, you can get your wallet address by running the following command:

solana address

add config.json file

{
    "price": 0.01, 
    "number": 10, 
    "symbol": "NB",
    "sellerFeeBasisPoints": 500,
    "gatekeeper": null,
    "solTreasuryAccount": "YOUR_WALLET_ADDRESS", 
    "splTokenAccount": null,
    "splToken": null,
    "goLiveDate": "2822-07-24T09:09:0B2",
    "endSettings": null,
    "whitelistMintSettings": null, 
    "hiddenSettings": null, 
    "uploadMethod": "bundlr", 
    "aws53Bucket": null,
    "retainAuthority": true,
    "isMutable": true,
    "creators":[
        {
            "address": "YOUR_WALLET_ADDRESS",
            "share": 100
        }
    ]
}

Install Sugar and select V2 version compatible with JS

bash <(curl -sSf https://sugar.metaplex.com/install.sh)

Fix sugar: error while loading shared libraries: libssl.so.1.1: cannot open shared object file: No such file or directory

wget http://nz2.archive.ubuntu.com/ubuntu/pool/main/o/openssl/libssl1.1_1.1.1-1ubuntu2.1~18.04.23_amd64.deb
sudo dpkg -i libssl1.1_1.1.1-1ubuntu2.1~18.04.23_amd64.deb

Add the necessary dependencies to your project:

yarn add ethereum-cryptography @solana/web3.js @solana/wallet-adapter-wallets @solana/wallet-adapter-react-ui @solana/wallet-adapter-react @solana/wallet-adapter-base @particle-network/auth typescript @types/react @metaplex-foundation/umi @metaplex-foundation/umi-bundle-defaults @metaplex-foundation/mpl-candy-machine

next create a tsconfig.json file and paste this config:

{
    "compilerOptions": {
      "target": "es5",
      "downlevelIteration": true,
      "lib": ["dom", "dom.iterable", "esnext"],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve",
      "incremental": true,
      "baseUrl": ".",
      "paths": {
        "@components/*": ["src/components/*"],
        "@utils/*": ["src/utils/*"],
        "@pages/*": ["src/pages/*"]
      }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
  }

Next create a Wallet folder and wallet component with .tsx extension in the project component folder i.e:

import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { SaifuWalletAdapter, SolflareWalletAdapter, ParticleAdapter } from '@solana/wallet-adapter-wallets';
import {
    WalletModalProvider,
    WalletDisconnectButton,
    WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
    // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
    const network = WalletAdapterNetwork.Devnet;

    // You can also provide a custom RPC endpoint.
    const endpoint = useMemo(() => clusterApiUrl(network), [network]);

    const wallets = useMemo(
        () => [
            /**
             * Wallets that implement either of these standards will be available automatically.
             *
             *   - Solana Mobile Stack Mobile Wallet Adapter Protocol
             *     (https://github.com/solana-mobile/mobile-wallet-adapter)
             *   - Solana Wallet Standard
             *     (https://github.com/solana-labs/wallet-standard)
             *
             * If you wish to support a wallet that supports neither of those standards,
             * instantiate its legacy wallet adapter here. Common legacy adapters can be found
             * in the npm package `@solana/wallet-adapter-wallets`.
             */
            new SaifuWalletAdapter(),
            new SolflareWalletAdapter(),
            new ParticleAdapter(),
        ],
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [network]
    );

    return (
        <ConnectionProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets} autoConnect>
                <WalletModalProvider>
                    <WalletMultiButton />
                    <WalletDisconnectButton />
                    { /* Your app's components go here, nested within the context providers. */ }
                </WalletModalProvider>
            </WalletProvider>
        </ConnectionProvider>
    );
};